<template>
    <el-dialog class="edit-password" title="产品支付" append-to-body :close-on-click-modal="closeOnclickModal"
               width="380px" :visible.sync="isDialogShow" @close="close">
        <el-form :model="dialogForm" ref="dialogForm" :size="size" label-width="100px">
            <el-form-item :rules="yh_rules({required:true})" label="人数" prop="context">
                <el-input-number  v-model="dialogForm.number" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item :rules="yh_rules({required:true})" label="出行日期" prop="tripDay">
                <el-date-picker
                        v-model="dialogForm.tripDay"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <div>
            <span>提交后等待旅游公司审核成团</span>
            <div style="font-size: 58px; color: #ff6257; text-align: center; margin-top: 18px">
                <span style="font-size: 26px">￥</span>{{(propTravelInfo.price * dialogForm.number).toFixed(1)}}
            </div>
            <div style="padding-left: 20px">
                <el-button type="text" @click="downloadContract">下载合同</el-button>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="close" :size="size">取消</el-button>
            <el-button type="primary" @click="submit" :size="size">提交</el-button>
        </span>
    </el-dialog>
</template>

<script>
  import {payOrder, addOrder} from '@/api/order'
  import {downloadContract} from '@/api/info'
  export default {
    name: 'DialogTravelPay',
    props: {
      propTravelInfo: {
        type: Object
      },
      dialogTravelPayShow: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        dialogForm: {
          number: 1,
          tripDay: ''
        },
        isDialogShow: false
      }
    },
    watch: {
      dialogTravelPayShow (newValue) {
        this.isDialogShow = newValue
      }
    },
    methods: {
      async submit() {
        let params = {
          infoId: this.propTravelInfo.infoId,
          ...this.dialogForm
        }
        let data = await addOrder(params)
        if (data) {
          this.$message.success('提交成功, 请到我的订单查看')
        }
       /* payOrder({orderId: data}).then(res => {
          this.$message.success('支付成功, 请到我的订单查看')
        })*/
      },
      downloadContract() {
        downloadContract()
      },
      close () {
        this.$emit('update:dialogTravelPayShow', false)
      },
    }
  }
</script>
